<template>
	<view class="site">
		<nav-bar class="header" title="光路管理" @goBack="goBack">
			<img slot="screen" src="../../../static/img/sx.png" alt="" @click="screen">
		</nav-bar>
		<view>
			<!-- 搜索 -->
			<!-- @click="showSearch=true" -->
			<view class="patrol-search">
				<van-search readonly v-model="searchValue" left-icon="" right-icon="search" placeholder="请输入光路名称"
					@click="showSearch=true" @cancel="onSearch('')" />
			</view>
			<view v-if="list.length > 0">
				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
					<van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
						<!-- 列表页 -->
						<standingCell @acquireId='acquireId' :list='list' />
					</van-list>
				</van-pull-refresh>
			</view>
			<view v-else class="site-other">
				— — 暂无数据，请选择其他类型查看 — —
			</view>
		</view>
		<!--弹出搜索页-->
		<van-popup v-model="showSearch" position="right">
			<search-equ-match @cancel="showSearch = false;" @search="onSearch" />
		</van-popup>
		<!--筛选弹窗-->
		<screenPopup :type-list="filtrationList" :showScreen="showScreen" @closePopup="showScreen=false"
			:multipleChoice='true' @confirm="confirmCondition">
		</screenPopup>
	</view>
</template>

<script>
	import navBar from "../../../components/common/nav-bar.vue";
	import screenPopup from "../common/screenPopup.vue";
	import plateTitle from "../../../components/business/plateTitle.vue";
	import searchEquMatch from '../../common/searchEquMatch';
	import standingCell from "../../../components/standingBookComponents/cell/cell.vue"
	import {
		getLightPathOverall,
		getOption
	} from "../../../api/ydtzApi.js"
	export default {
		data() {
			return {
				showSearch: false,
				showScreen: false,
				refreshing: false, // 是否正在刷新
				finished: false,
				isLoading: false,
				total: 0, // 总条数
				page: 1,
				limit: 10,
				searchValue: '', //搜索
				showSelectContent: false, //筛选弹窗
				list: [],
				dispatchingTypes: [],
				rates: [],
				mainPrepares: [],
				strategys: [],
				filtrationList: [{
					name: '调度等级',
					type: 1,
					child: [{
						dictCode: -1,
						dictLabel: "全部",
						default: false
					}]
				}, {
					name: '带宽',
					type: 2,
					child: [{
						dictCode: -1,
						dictLabel: "全部",
						default: false
					}]
				}, {
					name: '主备光路',
					type: 3,
					child: [{
						dictCode: -1,
						dictLabel: "全部",
						default: false
					}]
				}, {
					name: '光路保护策略',
					type: 4,
					child: [{
						dictCode: -1,
						dictLabel: "全部",
						default: false
					}, ]
				}],
			}
		},
		components: {
			navBar,
			searchEquMatch,
			standingCell,
			screenPopup,
			plateTitle
		},
		onLoad() {
			this.getOption()
			this.getTaskListByAdminT()
		},
		methods: {
			// 公共选项
			getOption() {
				[4, 9, 10, 11].forEach(dictFlag => this.$apiRequest.ydtzApi.getOption({
					dictFlag
				}).then(({
					data: res
				}) => {
					let arr = res
					arr.unshift({
						dictCode: -1,
						dictLabel: "全部",
						default: false
					})
					if (dictFlag == 4) {
						this.filtrationList[0].child = arr
					} else if (dictFlag == 9) {
						this.filtrationList[1].child = arr
					} else if (dictFlag == 10) {
						this.filtrationList[2].child = arr
					} else if (dictFlag == 11) {
						this.filtrationList[3].child = arr
					}
				}))
			},
			// 获取列表
			getTaskListByAdminT() {
				let params = {
					pageSize: this.limit,
					pageNum: this.page,
					name: this.searchValue,
				}
				if (this.dispatchingTypes.length > 0) {
					params.dispatchingTypes = this.dispatchingTypes
				}
				if (this.rates.length > 0) {
					params.rates = this.rates
				}
				if (this.mainPrepares.length > 0) {
					params.mainPrepares = this.mainPrepares
				}
				if (this.strategys.length > 0) {
					params.strategys = this.strategys
				}
				this.$apiRequest.ydtzApi.getLightPathOverall(params)
					.then(({
						data: res
					}) => {
						this.list = this.list.concat(res.rows.map(item => {
							return {
								name: item.name,
								secondArr: [{
										label: "带宽",
										value: item.rate,
									},
									{
										label: "调度等级",
										value: item.dispatchinglevelName
									},
									{
										label: "光路保护策略",
										value: item.strategy
									},
									{
										label: "主备光路",
										value: item.mainPrepareName
									},
								],
								...item
							}
						}));
						this.isLoading = false;
						this.refreshing = false;
						// this.total = this.menuList[this.current].count
						this.total = res.total
					})
			},
			confirmCondition(selected) {
				if (selected[1].indexOf(-1) == -1) {
					this.dispatchingTypes = selected[1]
				} else {
					this.dispatchingTypes = []
				};
				if (selected[2].indexOf(-1) == -1) {
					this.rates = selected[2]
				} else {
					this.rates = []
				}
				if (selected[3].indexOf(-1) == -1) {
					this.mainPrepares = selected[3]
				} else {
					this.mainPrepares = []
				}
				if (selected[4].indexOf(-1) == -1) {
					this.strategys = selected[4]
				} else {
					this.strategys = []
				}
				this.onRefresh()
			},
			onRefresh() {
				this.refreshing = true;
				this.finished = false;
				this.page = 1;
				this.list = [];
				this.getTaskListByAdminT();
			},
			loadMore() {
				// 加载完毕
				if (this.total > this.list.length) {
					this.page = this.page + 1;
					this.getTaskListByAdminT();
				} else {
					this.finished = true;
				}
			},
			goBack() {
				uni.navigateBack()
			},
			screen() {
				this.showScreen = true;
			},
			onSearch(searchValue) {
				this.searchValue = searchValue
				this.onRefresh()
				this.showSearch = false
			},
			// 获取id进入详情页
			acquireId(value) {
				uni.navigateTo({
					url: `/pages/standingBook/opticalPathManagement/opticalPathDetail/opticalPathDetail?objId=${value.objId}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f2f6fa;
	}

	.header {
		position: sticky;
		top: 0;
		z-index: 999;

		img {
			width: px2vw(48);
			margin-right: px2vw(40);
		}
	}

	/deep/ .cell-line-item {
		width: 50% !important
	}

	/deep/ .cell-line-item:nth-child(even) {
		width: 50% !important;
	}


	.patrol-search {
		width: px2vw(1020);
		height: 38px;
		margin: px2vw(20) px2vw(30) 0 px2vw(30);
		z-index: 999999;

		.van-search {
			padding: 0 0;
			height: 38px;
		}

		.van-search__content {
			background: #fff;
			height: 38px;
			border-radius: px2vw(20) !important;
		}

		/deep/.van-field__control {
			height: 30px;
		}
	}

	.site-other {
		position: absolute;
		top: 22%;
		width: 100vw;
		text-align: center;
		font-size: px2vh(36);
		color: #9B9CAA;
		font-weight: 600;
	}
</style>